<div class="outer fill-parent no-margins">

  <div class="navbar navbar-default toolbar">

    <div class="navbar-inner">
      <div class="navbar-form pull-left">

        <div class="btn-group" role="group">
          <button id="refresh-dir" class="btn btn-default"
                  title="Refresh this directory (sync its listing with the client)"
                  ng-disabled="controller.lastRefreshOperationId"
                  ng-click="controller.startVfsRefreshOperation()">
            <img src="/static/images/stock_refresh.png" class="toolbar_icon" />
          </button>

          <grr-recursive-list-button client-id="controller.fileContext.clientId"
                                     file-path="controller.fileContext.selectedFilePath"
                                     class="space-right">
          </grr-recursive-list-button>
        </div>

        <grr-vfs-files-archive-button client-id="controller.fileContext.clientId"
                                      file-path="controller.fileContext.selectedFilePath"
                                      class="space-right">
        </grr-vfs-files-archive-button>

        <div class="input-group large">
          <input type="text" class="form-control file-search" placeholder="Filter Items"
                 ng-model="controller.filterEditedValue" grr-bind-key="controller.updateFilter()">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button" ng-click="controller.updateFilter()">
              <i class="fa fa-filter"></i>
            </button>
          </span>
        </div>

      </div>

      <div class="navbar-form pull-right">

        <grr-r-we-owned-button class="space-right"></grr-r-we-owned-button>

        <div class="btn-group" uib-dropdown>
          <label class="btn btn-default"
                 uib-btn-radio="'list'" ng-model="controller.viewMode">
            <i class="fa fa-list"></i> File list
          </label>
          <label class="btn btn-default"
                 uib-btn-radio="'timeline'" ng-model="controller.viewMode">
            <i class="fa fa-history"></i> Timeline
          </label>
          <button name="timelineDropdown" class="btn btn-default dropdown-toggle"
                  uib-dropdown-toggle>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" uib-dropdown-menu>
            <li>
              <a name="downloadTimelineGrrFormat"
                 ng-click="controller.downloadTimeline('GRR'); $event.preventDefault()"
                 href="#">
                Download timeline as GRR CSV
              </a>
            </li>
            <li>
              <a name="downloadTimelineBodyFormat"
                 ng-click="controller.downloadTimeline('BODY'); $event.preventDefault()"
                 href="#">
                Download timeline as body CSV
              </a>
            </li>
          </ul>
        </div>
      </div>

    </div>

  </div>

  <div class="breadcrumbs">
    <grr-breadcrumbs path="controller.fileContext.selectedFilePath"></grr-breadcrumbs>
  </div>

  <div class="content">
    <div grr-force-refresh refresh-trigger="controller.fileListUrl"
         ng-if="controller.viewMode === 'list'">
      <table class="table table-striped table-condensed table-hover table-bordered full-width file-list">

        <thead>
          <tr>
            <th>Icon</th>
            <th>Name</th>
            <th>st_size</th>
            <th>st_mtime</th>
            <th>st_ctime</th>
            <th>GRR Snapshot</th>
          </tr>
        </thead>

        <!-- We need this ng-if to make sure fileListUrl is stable when ApiItemsProvider is called. -->
        <tbody ng-if="controller.fileListUrl">
          <tr grr-infinite-table page-size="1000"
              filter-value="controller.filterValue"
              trigger-update="controller.triggerUpdate"
              grr-api-items-provider
              url="controller.fileListUrl"
              ng-click="controller.selectFile(item)"
              ng-dblclick="controller.selectFolder(item)"
              ng-class="{'row-selected': item.value.path.value === controller.fileContext.selectedFilePath}">
            <td>
              <img class="grr-icon directory" src="/static/images/directory.png"
                   alt="Directory" title="Directory" ng-if="item.value.is_directory.value">
              <img class="grr-icon file" src="/static/images/file.png"
                   alt="File Like Object" title="File Like Object" ng-if="!item.value.is_directory.value">
            </td>
            <td><grr-semantic-value value="::item.value.name" /></td>
            <td>
              <grr-semantic-value class="pull-left"
                                  value="::item.value.stat.value.st_size"></grr-semantic-value>
              <span ng-if="::item.value.last_collected_size !== undefined" class="pull-right">
                <i class="fa fa-download"
                   title="Collected ({$ ::item.value.last_collected_size.value $} bytes)"
                   aria-hidden="true">
                </i>
              </span>
              <div class="clearfix"></div>
            </td>
            <td><grr-semantic-value value="::item.value.stat.value.st_mtime" /></td>
            <td><grr-semantic-value value="::item.value.stat.value.st_ctime" /></td>
            <td><grr-timestamp value="::item.value.age.value" /></td>
          </tr>
        </tbody>

      </table>

    </div>

    <grr-file-timeline ng-if="controller.viewMode === 'timeline'"
                       filter-value="controller.filterValue">
    </grr-file-timeline>

  </div>
</div>
